import React from 'react'
import Helmet from 'react-helmet'
import PropTypes from 'prop-types'
import marked from 'marked'
import { observer, inject } from 'mobx-react'

import ListItemText from 'material-ui/List/ListItemText'
import { withStyles } from 'material-ui/styles'
import { CircularProgress } from 'material-ui/Progress'

import Container from '../layout/container'
import { topicDetailStyle, topicPrimaryStyle, topicSecondaryStyle } from './styles'
import { TopicStore } from '../../store/store'
import { tabs } from '../../util/variable-define'
import dateFormat from '../../util/date-format'

const Primary = ({ classes, topic }) => {
  const topTab = topic.top ? '置顶' : tabs[topic.tab]

  return (
    <div className={classes.root}>
      <div className={classes.tab}>{topTab}</div>
      <div className={classes.title}>{topic.title}</div>
    </div>
  )
}

const Secondary = ({ classes, topic }) => (
  <span className={classes.root}>
    <span>发布于{dateFormat(topic.create_at, 'yyyy-mm-dd hh:MM:ss')}</span>
    <span>作者{topic.author.loginname}</span>
    <span>{topic.visit_count}次浏览</span>
    <span>来自{tabs[topic.tab]}</span>
  </span>
)

Primary.propTypes = {
  classes: PropTypes.object.isRequired,
  topic: PropTypes.object.isRequired,
}

Secondary.propTypes = {
  classes: PropTypes.object.isRequired,
  topic: PropTypes.object.isRequired,
}

const StyledPrimary = withStyles(topicPrimaryStyle)(Primary)
const StyleSecondary = withStyles(topicSecondaryStyle)(Secondary)

@inject(stores => ({
  topicStore: stores.topicStore,
})) @observer

class TopicDetail extends React.Component {
  componentDidMount() {
    this.getSingalTopic()
  }

  getSingalTopic() {
    const { id } = this.props.match.params
    this.props.topicStore.fetchSingalToptic(id)
  }

  render() {
    const { topicStore, classes } = this.props
    const topicDetail = topicStore.topicDetail || {
      author: {},
      content: '',
    }
    const loading = topicStore.syncing

    if (loading) {
      return (
        <Container>
          <div className={classes.loadingRoot}>
            <CircularProgress />
          </div>
        </Container>
      )
    }

    return (
      <Container>
        <Helmet>
          <title>This is topic detail</title>
          <meta name="description" content="This is description" />
        </Helmet>
        <div className={classes.containerRoot}>
          <header className={classes.header}>
            <ListItemText
              primary={<StyledPrimary topic={topicDetail} />}
              secondary={<StyleSecondary topic={topicDetail} />}
            />
          </header>
          <div className={classes.container}>
            <div dangerouslySetInnerHTML={{ __html: marked(topicDetail.content) }} />
          </div>
        </div>
      </Container>
    )
  }
}

TopicDetail.wrappedComponent.propTypes = {
  topicStore: PropTypes.instanceOf(TopicStore).isRequired,
}

TopicDetail.propTypes = {
  match: PropTypes.object.isRequired,
  classes: PropTypes.object.isRequired,
}

export default withStyles(topicDetailStyle)(TopicDetail)
